<template>
  <el-row>
    <div class="margin_tb flex_c">
      <div class="flex_c input_btn" v-loading="customBrand.loading">
        <h4 class="label_w">自定义品牌：</h4>
        <el-input
          v-model.trim="customBrand.value"
          size="mini"
          @keydown.native="handleKeyDownName"
          @blur="handleUpdateName"
        />
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-check"
          :disabled="!customBrand.value"
          @click="handleUpdateName"
        />
      </div>
      <TextToolTip
        bold
        label="已选品牌"
        labelWidth="100px"
        maxWidth="100px"
        :text-content="brandInfo.brandName"
      />
      <LabelSelect
        v-show="brandInfo.brandName"
        v-loading="brandseries.loading"
        clearable
        size="mini"
        labelKey="series"
        valueKey="seriesUuid"
        label="选择系列"
        labelWidth="100px"
        placeholder="选择系列"
        :required="brandInfo.brandType == '1'"
        :value.sync="brandseries.value"
        :options="brandseries.options"
        @change="handleSelectBrandseries"
      />
    </div>
  </el-row>
</template>
<script>
import LabelSelect from '@/pages/commodity/components/LabelSelect';
import TextToolTip from '@/components/ShowContent/TextTooltip';
import { getSeriesByBrandUuidService } from '@/api/public';
import { getByBrandNameService } from '@api/basics/brandManage/brandManage';
export default {
  components: {
    LabelSelect,
    TextToolTip
  },
  props: {
    brandInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      customBrand: {
        value: '',
        loading: false
      }, // 自定义品牌选择
      brandseries: {
        value: '',
        options: [],
        loading: false
      },
    }
  },
  watch: {
    brandInfo: {
      handler (data) {
        this.resetSeriesState() // 品牌信息变更，系列状态重置
        this.updateSeriesOptions(data?.uuid)
      },
      deep: true
    }
  },
  methods: {
    // 选择系列
    handleSelectBrandseries ({ value }) {
      this.brandseries.value = value
      this.updateSeriesInfo()
    },
    // 键盘事件
    handleKeyDownName (event) {
      if (event.keyCode === 13) {
        this.handleUpdateName()
      }
    },
    // 更新自定义品牌名
    async handleUpdateName () {
      if (!this.customBrand.value) return
      // 查询自定义名称是否库里已存在，若存在，使用该信息
      const data = this.customBrand.value
      const loadingFn = state => { this.customBrand.loading = state }
      const res = await getByBrandNameService(data, loadingFn)
      this.updateBrandInfo(res?.retData)
    },
    // 更新系列下拉
    async updateSeriesOptions (brandUuid) {
      if (!brandUuid) return this.updateSeriesInfo()
      const data = { brandUuid }
      const loadingFn = state => { this.brandseries.loading = state }
      const res = await getSeriesByBrandUuidService(data, loadingFn)
      this.brandseries.options = res?.retData ?? []
      if (this.brandseries.options.length == 1) { // 如果系列集合只有一个值，默认选中
        this.brandseries.value = this.brandseries.options[0].seriesUuid
      }
      this.updateSeriesInfo()
    },
    // 更新品牌内容
    updateBrandInfo (data) {
      const brandInfo = {
        brandName: data?.brandName ?? this.customBrand.value,
        uuid: data?.uuid ?? '', // 自定义名称没有ID
        brandType: data?.brandType // 品牌类型
      }
      this.$emit('update-brand', brandInfo)
    },
    // 更新系列内容
    updateSeriesInfo () {
      const seriesInfo = {
        uuid: this.brandseries.value,
        options: this.brandseries.options
      }
      this.$emit('update-series', seriesInfo)
    },
    // 重置自定义品牌名状态
    resetCustomBrandState () {
      this.customBrand.value = ''
    },
    // 重置系列状态
    resetSeriesState () {
      this.brandseries.value = ''
      this.brandseries.options = []
    }
  }
}
</script>
<style lang="less" scoped>
.label_w {
  width: 100px;
  text-align: right;
}
.flex_c {
  display: flex;
  align-items: center;
}
.margin_tb {
  margin: 10px 0px;
}
/deep/ .el-select {
  width: 50%;
}
.input_btn {
  display: flex;
  .el-input {
    width: 50%;
  }
  /deep/ .el-input__inner {
    border-radius: 4px 0 0 4px !important;
  }
  .el-button {
    border-left: none;
    border-radius: 0 3px 3px 0;
  }
}
</style>
